<template>
<div class="third">
    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
         <FormItem label="设置密码" prop="passwd">
                <Input type="password" v-model="formCustom.passwd" placeholder="6-20位字符（包括数字、字母、符号两个以上组合）"></Input>
            </FormItem>
        <FormItem label="确认密码" prop="passwdCheck">
            <Input type="password" v-model="formCustom.passwdCheck" placeholder="请再次确认密码"></Input>
        </FormItem>
        <FormItem>
            <Button style="width: 100%;" type="primary" size="large" @click="handleSubmit()">下一步</Button>
        </FormItem>
    </Form>
</div>
</template>

<script>
const pwdReg = /^[a-zA-Z0-9!@#$%^&*()_+]{6,16}$/; //密码验证

export default {
    name: 'PasThird',
    data() {
         const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('密码不能为空'));
            } else {
                if (this.formCustom.passwdCheck !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formCustom.validateField('passwdCheck');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formCustom.passwd) {
                callback(new Error('输入的密码不一致'));
            } else {
                callback();
            }
        };
        return {
            formCustom: {
                passwd: '',
                passwdCheck:'',
            },
            ruleCustom: {
                passwd: [{
                    validator: validatePass,
                    trigger: 'blur'
                }, {
                    pattern: pwdReg,
                    message: '密码由（6-20位字母/数字/符号）组成',
                    trigger: 'blur'
                }],
                passwdCheck: [{
                    validator: validatePassCheck,
                    trigger: 'blur'
                }],
            }
        }
    },
    methods: {
        handleSubmit() {
           this.$refs['formCustom'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit');
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })

        }
    },
}
</script>

<style lang="less" scoped>
.third{
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    padding-bottom: 140px;
     .ivu-input-wrapper {
            width: 285px;
        } 
}
.ivu-btn {
    background-color: #D92410;
    border-color: #D92410;
    width: 410px;
}
.ivu-form-item{
    margin-bottom: 40px;
}
</style>
